<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">发货通知新建</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <el-col class="mr20 width100">
                    <el-button
                        class="btn-success width100"
                        type="primary"
                        @click="sendNotice()"
                    >发货</el-button>
                </el-col>
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span class="active">未通知</span>
                        <span>已通知</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8" style="position:relative;">
                    <span>收货人：</span><el-input v-model="send.name" placeholder="请输入收货人" @input="addressFilter" @clear="clearAddress" clearable />
                    <ul class="options" v-if="isAddress">
                        <div class="options-item" v-if="listAddress.length > 0">
                            <li @click="checkAddress(item.name, item.address, item.telephone)" v-for="item in listAddress" :key="item.id">
                                {{ item.name + item.telephone + item.address}}
                            </li>
                        </div>
                    </ul>
                </el-col>
                <el-col :span="8">
                    <span>联系方式：</span><el-input v-model="send.telephone" placeholder="请输入联系电话" clearable @input="onInput" />
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="16">
                    <span>收货地址：</span><el-input v-model="send.address" placeholder="请输入收货地址" clearable />
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8" style="position:relative;">
                    <span>产品名称：</span><el-input v-model="send.productName" placeholder="请输入产品名称" @input="productFilter" @clear="clearProduct" clearable />
                    <ul class="options" v-if="isProduct">
                        <div class="options-item" v-if="listProduct.length > 0">
                            <li @click="checkProduct(item.productId, item.productName, item.productSpace)" v-for="item in listProduct" :key="item.id">
                                {{ item.productName + item.productSpace + item.approveNumber}}
                            </li>
                        </div>
                    </ul>
                </el-col>
                <el-col :span="8">
                    <span>产品规格：</span><el-input v-model="send.productSpace" placeholder="请输入产品规格" clearable />
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>通知数量：</span><el-input v-model="send.planStoreOut" placeholder="请输入可通知数量" @input="inputNum" clearable />
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="16">
                    <span>备注：</span><el-input v-model="send.remark" type="textarea" placeholder="请输入内容"></el-input>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { listAddress, addOemNotice } from "@/api/system/notice/notice"
import { listProduct } from "@/api/system/product/product"
export default {
    name: "noticeOemAdd",
    data() {
        return {
            addressData: '', // 收货人
            productData: '', // 产品
            send: {
                name: '',
                telephone: '',
                address: '',
                productId: '',
                productName: '',
                productSpace: '',
                planStoreOut: '',
                remark: ''
            },
            isAddress: false,
            listAddress: '',
            isProduct: false,
            listProduct: ''
        }
    },
    created() {
        this.getAddressData()
        this.getProduct()
    },
    methods: {
        // 获取收货人列表
        getAddressData(){
            listAddress().then(res => {
                this.addressData = res.rows
            })
        },
        // 获取产品列表
        getProduct(){
            listProduct().then((res) => {
                this.productData = res.rows
            })
        },
        // 根据name过滤搜索结果
        addressFilter() {
            if (this.send.name) {
                this.isAddress = true
            } else {
                this.isAddress = false
                this.send.address = ''
                this.send.telephone = ''
            }
            if(this.addressData){
                this.listAddress = this.addressData.filter((item) => {
                    return item.name.includes(this.send.name)
                })
            }
        },
        // 选中收货人
        checkAddress(name, address, telephone) {
            this.send.name = name
            this.send.address = address
            this.send.telephone = telephone.replace(/[^0-9]/ig, '')
            this.isAddress = false
        },
        onInput(e){
            this.send.telephone = e.replace(/[^0-9]/ig, '')
        },
        // 清除收货人
        clearAddress(){
            this.send.name = ''
            this.send.address = ''
            this.send.telephone = ''
        },
        // 根据产品名称过滤
        productFilter(){
            if (this.send.productName) {
                this.isProduct = true
            } else {
                this.isProduct = false
                this.send.productId = ''
                this.send.productSpace = ''
            }
            this.listProduct = this.productData.filter((item) => {
                return item.productName.includes(this.send.productName)
            })
        },
        // 选中产品
        checkProduct(productId, productName, productSpace) {
            this.send.productId = productId
            this.send.productName = productName
            this.send.productSpace = productSpace
            this.isProduct = false
        },
        // 清除产品
        clearProduct(){
            this.send.productId = ''
            this.send.productName = ''
            this.send.productSpace = ''
        },
        // 数量验证
        inputNum(val){
            if(/^[1-9]\d*$|^0$/.test(val) == false){
                this.$modal.msgError('通知数量必须是数字！')
                this.send.planStoreOut = ''
                return false
            }else{
                if(JSON.parse(val) <= 0){
                    this.send.planStoreOut = ''
                    this.$modal.msgError('通知数量必须大于0!')
                }
            }
        },
        // 发货
        sendNotice(){
            const { name, address, telephone, planStoreOut } = this.send
            if(name == ''){
                this.$modal.msgError('收货人不能为空！')
            }else if(telephone == ''){
                this.$modal.msgError('联系方式不能为空！')
            }else if(address == ''){
                this.$modal.msgError('收货地址不能为空！')
            }else if(planStoreOut == ''){
                this.$modal.msgError('通知数量不能为空！')
            }else{
                addOemNotice(this.send).then((res) => {
                    if(res.code == 200){
                        this.$tab.closeOpenPage({ path: "/notice/list" })
                        this.$modal.msgSuccess("新建成功!")
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
  .options {
    position: absolute;
    z-index:10;
    top: 36px;
    left:140px;
    right:0;
  }
  .options li {
    height: 48px;
    line-height: 48px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-top: 0px;
    text-indent: 12px;
    overflow: hidden;
  }
  .options li:hover {
    background: #f3f5f9;
    color: #000;
  }
  .options-head {
    border: 1px solid #ccc;
    background: #f3f5f9;
  }
  .options-item{
    background:#fff;
    overflow-y:scroll;
    height: 300px;
  }
</style>